import { PureComponent } from 'react';
import moment from 'moment';
import styles from './StaffInfoList.less';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    DatePicker,
    Icon,
    Button
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};
let certificateChangeInput = null;
@Form.create({
	onValuesChange(props, changedValues, allValues){
		if(certificateChangeInput == null) {
			certificateChangeInput = changedValues;
		}else {
			Object.assign(certificateChangeInput,certificateChangeInput,changedValues);
		}
	}
})
class UpdateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	   	if(props.values) {
	    	this.state = {
		    	certificateList:props.values
		    }
	    }else {
	    	this.state = {
		    	certificateList:[]
		    }
	    }
	}
 	
 	componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.values && nextProps.values !== this.props.values) {
	      this.setState({certificateList: [...nextProps.values,{id: '1',punid: ''}]});
		}
		
	}

	handleLocalUpdate = (event,res) => {
		event.preventDefault();
		const { form,handleUpdateByCertificate } = this.props;

	    form.validateFields((err, fieldsValue) => {
	        if (err) return;
		    form.resetFields();
		    if(certificateChangeInput == null) {
				fieldsValue.id = res.id;
				fieldsValue.punid = res.punid;
				fieldsValue.certificate_name = res.certificate_name;
				fieldsValue.certificate_number = res.certificate_number;
				fieldsValue.certificate_start_time = res.certificate_start_time;
				fieldsValue.certificate_end_time = res.certificate_end_time;
				fieldsValue.certificate_remarks = res.certificate_remarks;
			}else {
				Object.assign(fieldsValue,res,certificateChangeInput);
			}
			if(fieldsValue.certificate_start_time) {
      			fieldsValue.certificate_start_time = moment(moment(fieldsValue.certificate_start_time)._d).format("YYYY-MM-DD");
      		}
			if(fieldsValue.certificate_end_time) {
      			fieldsValue.certificate_end_time = moment(moment(fieldsValue.certificate_end_time)._d).format("YYYY-MM-DD");
      		}
		    handleUpdateByCertificate(fieldsValue);
		});
	};
	
	
	certificateList = () => {
		const { handleCertificate,certificateCurrentIndex,cancelCertificate,handleDeleteByCertificate } = this.props;
  		const { getFieldDecorator } = this.props.form;
  		const _this = this;
  		return this.state.certificateList.map(function(res,index) {
			const editCertificate = res.id == certificateCurrentIndex ? true:false;
		  	return (
				<div style={res.id != 1?{display: 'block',marginBottom:'0'}:{display: 'none',marginBottom:'0'}}>
			      	<div className={styles.eduContainer}>
			      		<span>证书{index + 1}</span>
			      		<div style={{float: "right"}}>
			      			<div className={styles.eduEdit} onClick={handleCertificate.bind(_this,res)}>
			      				<Icon type="edit"/>编辑
			      			</div>
			      			<Icon type="delete" style={{fontSize: '16px',color: '#c0c4cc'}} onClick={handleDeleteByCertificate.bind(_this,res)}/>
			      		</div>
			      	</div>
			      	<Form layout="vertical" style={editCertificate?{display: "block"}:{display: 'none'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="证书名称">
							            {getFieldDecorator('certificate_name', {
							            rules: [{ required: true, message: '请输入1-50位字符的证书名称', max: 50}],
							            initialValue: res.certificate_name,
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="证书编号">
							            {getFieldDecorator('certificate_number', {
							            rules: [{ required: true, message: '最多输入50位字符', max: 50}],
							            initialValue: res.certificate_number,
							            })(<Input placeholder="1-50位字符" />)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
							    <Col md={12} sm={24}>
						          <FormItem  label="证书起始日期">
						              {getFieldDecorator('certificate_start_time',{
						        
						        		initialValue: moment(res.certificate_start_time),
						              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
						          </FormItem>
						        </Col>
							    <Col md={12} sm={24}>
						          <FormItem  label="证书失效日期">
						              {getFieldDecorator('certificate_end_time',{
						              	initialValue: moment(res.certificate_end_time),
						              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
						          </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="证书备注">
							            {getFieldDecorator('certificate_remarks', {
							            rules: [{ required: false, message: '最多输入100位字符', max: 100}],
							            initialValue: res.certificate_remarks,
							            })(<Input placeholder="1-100位字符" />)}
							        </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: '30px'}}>
						    	<Col md={12} sm={24}>
						    		<Button 
					            	size="large" 
					            	style={{marginRight: '10px'}}
					            	onClick={()=> {
					            		const { form } = _this.props;
		  								form.resetFields();
					            		cancelCertificate();
					            	}}>
					            	取消
					           		</Button>
						            <Button size="large" type="primary" onClick={()=>_this.handleLocalUpdate(event,res)}>保存</Button>
						        </Col>
						    </Row>
			
			
						</Form>
						<Form  {...formItemLayout} style={editCertificate?{display: "none"}:{display: 'block'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="证书名称">
							            {getFieldDecorator('certificate_name',{
							            	rules: [{ message: '请输入1-50位字符的证书名称', max: 50}],
							            })(<span>{res.certificate_name}</span>)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="证书编号">
							            {getFieldDecorator('certificate_number',{
							            	rules: [{ message: '最多输入50位字符', max: 50}],
							            })(<span>{res.certificate_number}</span>)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
							    <Col md={12} sm={24}>
						          <FormItem  label="证书起始日期">
						              {getFieldDecorator('certificate_start_time')(<span>{moment(res.certificate_start_time).format('YYYY-MM-DD')}</span>)}
						          </FormItem>
						        </Col>
							    <Col md={12} sm={24}>
						          <FormItem  label="证书失效日期">
						              {getFieldDecorator('certificate_end_time')(<span>{moment(res.certificate_end_time).format('YYYY-MM-DD')}</span>)}
						          </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="证书备注">
							            {getFieldDecorator('certificate_remarks',{
							            	rules: [{ required: false, message: '最多输入100位字符', max: 100}],
							            })(<span>{res.certificate_remarks}</span>)}
							        </FormItem>
						        </Col>
					
					    	</Row>
		
						</Form>
		      	</div>
		  	)
		
		});
  	}

  render() {

return (
	<div>
		{this.certificateList()}
	</div>
);
  }

}

export default UpdateForm;
